<template>
	<w-horizontal-scroll ref="betterScroll">
		<template #header>
			<div class="pro-name" @click="$router.go(-1)">项目名称：{{proName}}</div>
			<ul class="light-box">
				<li class="light-item" v-for="(item, i) in lightList">
					<el-image class="light-img" :src="item.img" :fit="fit" />
					<span class="light-txt">{{item.txt}}</span>
				</li>
			</ul>
		</template>
		<template #default>
			<w-fish-bone :proID="id" :baseList="baseList" @refresh-data="getFishData" />
		</template>
	</w-horizontal-scroll>
</template>

<script>
import api               from '@/api/api.js'
import WHorizontalScroll from '@/components/WHorizontalScroll.vue'
import WFishBone         from '@/components/WFishBone.vue'
import linght0           from '@/assets/images/linght-0.png'
import linght1           from '@/assets/images/linght-1.png'
import linght2           from '@/assets/images/linght-2.png'

export default {
	name      : "fishbone-diagram",
	components: {WHorizontalScroll, WFishBone},
	props     : {},
	data() {
		return {
			id       : this.$route.params.id,
			proName  : this.$route.query.project_name,
			baseList : [
				/*{
					"name": "立项",
					"list": [
						{
							"app_phase_desc" : "立项",
							"task_name"      : "上报主管区长业务会议,上报直属部门,上报本单位业务会议,上报主管区长业务会议",
							"work_id"        : 61,
							"template_name"  : "新建回迁房项目模板（测试）",
							"work_name"      : "上报政府会议立项",
							"work_idx"       : 1,
							"work_time_start": "2020-09-21",
							"work_time_end"  : "",
							"project_name"   : "测试项目2",
							"task_go_type"   : "未开始,未开始,未开始,未开始",
							"task_list"      : [
								{
									"this_max_is_mvp"   : "0",//非风险要件 低风险要件 中风险要件 高风险要件
									"this_task_name"    : "上报主管区长业务会议",
									"this_task_go_types": "02", //已完成 进行中 未开始
									"this_warning_type" : "0" //这个为1有叹号
								},
								{
									"this_max_is_mvp"   : "2",
									"this_task_name"    : "自行选取招标代理公司",
									"this_task_go_types": "02",
									"this_warning_type" : "0"
								},
								{
									"this_max_is_mvp"   : "3",
									"this_task_name"    : "上报本单位业务会议",
									"this_task_go_types": "02",
									"this_warning_type" : "1"
								},
							]
						},
					]
				},*/
			],
			fit      : 'fill',
			lightList: [
				{img: linght0, txt: '已完成'},
				{img: linght1, txt: '进行中'},
				{img: linght2, txt: '未开始'},
			],
		}
	},
	computed  : {},
	watch     : {},
	methods   : {
		async getFishData() {
			const {data: {code, data, msg}} = await api.get['/rest/projectFollow/queryFollow'](this.id)
			// console.log(data);
			if (code === '0' && Array.isArray(data) && data.length) {
				this.baseList = data;
				this.$refs.betterScroll.betterScrollInit();
			}
		}
	},
	mounted() {
		this.getFishData();
	},
}
</script>

<style lang="scss" scoped>
	@import "~@/assets/css/_variables.scss";

	.pro-name {
		position: absolute;
		top: 15px;
		left: 45px;
		cursor: pointer;

		&:hover {
			text-decoration: underline;
		}
	}

	.light-box {
		@include flex-start();
		position: absolute;
		top: 20px;
		right: 30px;

		.light-item {
			@include flex-start();
			margin-right: 30px;

			.light-img {
				margin-right: 5px;
			}

			.light-txt {
				font-size: 12px;
				color: #919191;
			}
		}
	}
</style>
